<script lang="ts" setup>
import router from "@/router";
import { useTabs } from "./useTabs.ts";
import { getSvg } from "@/utils";
defineOptions({
  name: "Tabs"
});
const props = defineProps({
  tabOptions: {
    type: Array as () => {
      title: string;
      className?: string;
      path: string;
    }[],
    default: () => []
  }
});

const { route, tabRefs } = useTabs(ref(props.tabOptions));
</script>
<template>
  <div class="flex justify-start items-center">
    <img
      @click="router.replace('/chkNum')"
      class="w-23 h-25 ml-16"
      :src="getSvg('Frame_444')"
    />
    <div
      class="w-full h-50 flex justify-start items-center gap-x-12 overflow-x-scroll whitespace-nowrap ml-12"
    >
      <div
        v-for="({ title, path }, idx) in tabOptions"
        :key="idx"
        class="font-bold text-16 color-#fff lh-19 text-center not-italic first-of-type:ml-0 last-of-type:mr-14 relative"
        @click="router.push(path)"
        :ref="el => (tabRefs[idx] = el)"
      >
        {{ title }}
        <div
          v-if="path === route.path"
          class="inline-block h-3 w-34 absolute bottom-[-5px] left-[50%] translate-x-[-50%] bg-#FFD931 rounded-3"
        ></div>
      </div>
    </div>
  </div>
</template>
